<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
            margin: 10px auto;
        }

        th,
        td {
            border: 1px solid black;
            padding: 15px;
            text-align: center;
        }
        form{
            width: 420px;
            height: 50px;
            margin: auto;
            position: relative;
        }
        #empTable tr:nth-child(2n){
            background-color: violet;
        }
        th{
            background-color: #999999;
        }
        form input{
            height: 40px;
            outline: none;
            width: 350px;
        }
        form button{
            height: 44px;
            width: 60px;
            position: absolute;
        }
        .page{
            text-align: center;
        }
        .page a{
            text-decoration: none;
            color: black;
            padding: 0 20px;
        }
        #add{
            height: 45px;
            width: 80px;
            background-color: pink;
            margin-left: 1075px;
            border: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<form>
    <input type="text" placeholder="请输入员工姓名" autocomplete="off" class="inp">
    <button id="sear" type="button">搜索</button>
</form>
<a href="addemp.html"><button type="button" id="add">添加</button></a>
<table id="empTable">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>职务</th>
        <th>工资</th>
        <th>头像</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<div class="page">
    <a href="javascript:void(0)" id="first" class="pages">首页</a>
    <a href="javascript:void(0)" id="prve" class="pages">上一页</a>
    <a href="javascript:void(0)" id="next" class="pages">下一页</a>
    <a href="javascript:void(0)" id="last" class="pages">最后一页</a>
</div>

<script>
    let pageNum1=0;
    let pageSize1=0;
    $(function(){
        let getEmpList=function(curr){
        $.ajax({
            type:"POST",
            url:"/empPage",
            dataType:"json",
            data:{
                "pageNum":curr||1,
                "pageSize":5
            },
            success:function(result){
                let tableBody = $("#empTable tbody");
                //清空表格
                tableBody.empty();
                $.each(result.list,function(index,obj){
                    let row = $("<tr></tr>");
                    row.append($("<td class='empno'></td>").text(obj.empno));
                    row.append($("<td class='ename'></td>").text(obj.ename));
                    row.append($("<td class='job'></td>").text(obj.job));
                    row.append($("<td class='sal'></td>").text(obj.sal));
                    row.append($("<td class='filepath'><img src=''></td>").text(obj.));
                    row.append($("<td><a href='#' class='delet'>删除</a> <a href='#' class='update'>修改</a></td>"));
                    tableBody.append(row);
                })
                pageNum1=result.pageNum
                pageSize1=result.totalPage
            }
        })
        }
        //上一页
        $(".pages").click(function(){
            let flag=$(this).attr("id")
            if (flag=="first"){
                getEmpList(1)
            }else if(flag=="prve"){
                if (pageNum1==1){
                    getEmpList(1)
                }else {
                    getEmpList(pageNum1 - 1)
                }
            }else if(flag=="next"){
                if (pageNum1==pageSize1){
                    getEmpList(pageNum1)
                }else{
                    getEmpList(pageNum1+1)
                }
            }else if(flag=="last"){
                getEmpList(pageSize1)
            }

        })
        getEmpList(pageNum1)
    })
    //模糊查找
    $('#sear').click(function(){
        $.ajax({
            type: "POST",
            url: "/empvague",
            dataType: "json",
            data: {
                "ename": $(".inp").val()
            },
            success: function(data){
                let tableBody2 = $("#empTable tbody");
                // 清空表格
                tableBody2.empty();
                $.each(data, function(index, emp){
                    let row = $("<tr></tr>");
                    row.append($("<td class='empno'></td>").text(obj.empno));
                    row.append($("<td class='ename'></td>").text(emp.ename));
                    row.append($("<td class='job'></td>").text(emp.job));
                    row.append($("<td class='hiredate'></td>").text(emp.hiredate));
                    row.append($("<td class='sal'></td>").text(emp.sal));
                    row.append($("<td class='dname'></td>").text(emp.dept.dname));
                    row.append($("<td><a href='#' class='delet'>删除</a><a href='#' class='update'>修改</a></td>"));
                    tableBody2.append(row);
                });
            }
        });
    });
    // 删除功能
    $("#empTable").on('click', '.delet', function(){
            $.ajax({
                type:"post",
                url:"/empdelete",
                dataType:"json",
                data:{
                    "empno":$(this).closest('tr').find('.empno').text()
                },
                success:function(data){
                    console.log(data)
                    if (data>0){
                        alert("删除成功！")
                        location.reload(); // 刷新页面
                    }
                }
            })
        })
    //修改功能
    $("#empTable").on('click', '.update', function(){
        $.ajax({
            type:"post",
            url:"/empupdatenews",
            data:{
                "empno":$(this).closest('tr').find('.empno').text(),
                "ename":$(this).closest('tr').find('.ename').text(),
                "job":$(this).closest('tr').find('.job').text(),
                "sal":$(this).closest('tr').find('.sal').text(),
                "dname":$(this).closest('tr').find('.dname').text(),
            },
            success:function(res){
                if (res=="true"){
                    location.href='empupdate.jsp'
                }
            }
        })
    })
</script>
</body>

</html>